<!--
 * @FilePath: /fxfzywpt/src/components/ColorPalette/index.vue
 * @Description: 
-->
<template>
  <div class="color-palette">
    <div class="color-gradient" :style="colorGradientStyle"></div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const props = defineProps({
  startColor: {
    type: String,
    default: '#A80000',
  },
  endColor: {
    type: String,
    default: '#FF0000',
  },
});

const colorGradientStyle = computed(() => ({
  width: '100%',
  height: '10px',
  background: `linear-gradient(to right, ${props.startColor}, ${props.endColor})`,
}));
</script>

<style scoped lang="scss">
.color-palette {
  display: inline-block;
}
.color-gradient {
  width: 100%;
  height: 100%;
}
</style>
